<nz-collapse *ngIf="product" [nzBordered]="false">

  <nz-collapse-panel #p4 [nzHeader]="listHeader4" [nzActive]="true" [ngStyle]="styles" [nzShowArrow]="false">
    <ul class="m-attrList">
      <li class="item">
        <span class="item-name">图纸编号</span>
        <span class="item-value">{{extra.ztzbh || '未维护'}}</span>
      </li>

      <li class="item">
        <span class="item-name">产品代码</span>
        <span class="item-value">{{product.productCd || '未维护'}}</span>
      </li>

      <li class="item">
        <span class="item-name">CCS代码</span>
        <span class="item-value">{{product.codeName || '未维护'}}</span>
      </li>

      <li class="item">
        <span class="item-name">SAP</span>
        <span class="item-value">{{product.sap || '未维护'}}</span>
      </li>

      <li class="item">
        <span class="item-name">款号</span>
        <span class="item-value">{{product.style || '未维护'}}</span>
      </li>

      <li class="item">
        <span class="item-name">色号</span>
        <span class="item-value">{{product.colorCd || '未维护'}}</span>
      </li>

      <li class="item">
        <span class="item-name">品牌</span>
        <span class="item-value">{{product.appBrand || '未维护'}}</span>
      </li>

      <li class="item">
        <span class="item-name">品类</span>
        <span class="item-value">{{product.brandType || '未维护'}}</span>
      </li>

      <li class="item">
        <span class="item-name">品项名称</span>
        <span class="item-value">{{product.lineBrand || '未维护'}}</span>
      </li>

      <li class="item">
        <span class="item-name">品项简码</span>
        <span class="item-value">{{product.lineBrandCode || '未维护'}}</span>
      </li>

      <li class="item">
        <span class="item-name">年份</span>
        <span class="item-value">{{product.year || '未维护'}}</span>
      </li>

      <li class="item">
        <span class="item-name">款别</span>
        <span class="item-value">{{product.useGroup || '未维护'}}</span>
      </li>

      <li class="item">
        <span class="item-name">性别</span>
        <span class="item-value">{{extra.zxb || '未维护'}}</span>
      </li>

      <li class="item">
        <span class="item-name">单位</span>
        <span class="item-value">{{extra.meins || '未维护'}}</span>
      </li>

      <li class="item">
        <span class="item-name">净重</span>
        <span class="item-value">{{extra.ntgew || '未维护'}}</span>
      </li>

      <li class="item">
        <span class="item-name">感官色系</span>
        <span class="item-value">{{extra.zggsx || '未维护'}}</span>
      </li>


    </ul>
    <ng-template #listHeader4>
      <nz-tag [nzColor]="'#f5f3ef'" style="border: 1px solid rgba(180, 160, 120, 0.3);color: #b19e7a">
        基本信息</nz-tag>
    </ng-template>
  </nz-collapse-panel>

  <nz-collapse-panel #p0 [nzHeader]="listHeader0" [nzActive]="false" [ngStyle]="styles" [nzShowArrow]="false">
    <ul class="m-attrList">
      <li class="item">
        <span class="item-name">镜片宽度</span>
        <span class="item-value">{{extra.zjpkd || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">中梁间距</span>
        <span class="item-value">{{extra.zzljj || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">镜脚长度</span>
        <span class="item-value">{{extra.zjjcd ||'未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">镜框高度</span>
        <span class="item-value">{{extra.zjkgd || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">镜片高度</span>
        <span class="item-value">{{extra.zjpgd || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">镜框宽度</span>
        <span class="item-value">{{extra.zjkkd || '未维护'}}</span>
      </li>
    </ul>
    <ng-template #listHeader0>
      <nz-tag [nzColor]="'#f5f3ef'" style="border: 1px solid rgba(180, 160, 120, 0.3);color: #b19e7a">
        产品规格</nz-tag>
    </ng-template>
  </nz-collapse-panel>

  <nz-collapse-panel #p5 [nzHeader]="listHeader5" [nzActive]="false" [ngStyle]="styles" [nzShowArrow]="false">
    <ul class="m-attrList">
      <li class="item" style="width: 100%">
        <span class="item-name">销售渠道</span>
        <span class="item-value">
          <nz-tag *ngIf="extra.zpfxs === '1'">批发</nz-tag>
          <nz-tag *ngIf="extra.zdsxs === '1'">电商</nz-tag>
          <nz-tag *ngIf="extra.zlsxs === '1'">零售</nz-tag>
          <nz-tag *ngIf="extra.zgmxs === '1'">国贸</nz-tag>
          <nz-tag [nzColor]="'#d6d6d6'"
            *ngIf="extra.zpfxs === '0' && extra.zdsxs === '0' && extra.zlsxs === '0' && extra.zgmxs === '0'">
            无销售渠道
          </nz-tag>
        </span>
      </li>
      <li class="item">
        <span class="item-name">国内分季</span>
        <span class="item-value">{{extra.zgnfj || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">国贸分季</span>
        <span class="item-value">{{extra.zgmfj || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">全定制</span>
        <span class="item-value">{{product.isCmAll === '1' ? '是' : '否'}}</span>
      </li>
      <li class="item">
        <span class="item-name">定制近视太眼镜</span>
        <span class="item-value">{{product.isCm === '1' ? '是' : '否'}}</span>
      </li>
    </ul>
    <ng-template #listHeader5>
      <nz-tag [nzColor]="'#f5f3ef'" style="border: 1px solid rgba(180, 160, 120, 0.3);color: #b19e7a">
        销售渠道</nz-tag>
    </ng-template>
  </nz-collapse-panel>

  <nz-collapse-panel #p1 [nzHeader]="listHeader" [nzActive]="false" [ngStyle]="styles" [nzShowArrow]="false">
    <ul class="m-attrList">
      <li class="item">
        <span class="item-name">镜框类型</span>
        <span class="item-value">{{extra.zjklx || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">镜框形状</span>
        <span class="item-value">{{extra.zjkbq || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">镜框材质</span>
        <span class="item-value">{{extra.zjkcz || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">镜框颜色</span>
        <span class="item-value">{{extra.zjkys || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">镜框颜色编号</span>
        <span class="item-value">{{extra.zjkysbh || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">饰件材质</span>
        <span class="item-value">{{extra.zsjcz || '未维护'}}</span>
      </li>

      <li class="item">
        <span class="item-name">饰件颜色</span>
        <span class="item-value">{{extra.zsjys || '未维护'}}</span>
      </li>
    </ul>
    <ng-template #listHeader>
      <nz-tag [nzColor]="'#f5f3ef'" style="border: 1px solid rgba(180, 160, 120, 0.3);color: #b19e7a">
        镜框信息</nz-tag>
    </ng-template>
  </nz-collapse-panel>

  <nz-collapse-panel [nzHeader]="listHeader1" [nzActive]="false" [ngStyle]="styles" [nzShowArrow]="false">
    <ul class="m-attrList">
      <li class="item">
        <span class="item-name">镜片材质</span>
        <span class="item-value">{{extra.zjpcz || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">镀膜</span>
        <span class="item-value">{{extra.zdm || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">是否偏光</span>
        <span class="item-value">{{extra.zpg || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">透色比</span>
        <span class="item-value">{{extra.ztsb || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">镜片颜色</span>
        <span class="item-value">{{extra.zjps || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">镜片颜色编号</span>
        <span class="item-value">{{extra.zjpysbh || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">弯度</span>
        <span class="item-value">{{extra.zwd || '未维护'}}</span>
      </li>
    </ul>
    <ng-template #listHeader1>
      <nz-tag [nzColor]="'#f5f3ef'" style="border: 1px solid rgba(180, 160, 120, 0.3);color: #b19e7a">
        镜片信息</nz-tag>
    </ng-template>
  </nz-collapse-panel>

  <nz-collapse-panel [nzHeader]="listHeader2" [nzActive]="false" [ngStyle]="styles" [nzShowArrow]="false">
    <ul class="m-attrList">
      <li class="item">
        <span class="item-name">镜脚材质</span>
        <span class="item-value">{{extra.zjjcz || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">镜腿颜色</span>
        <span class="item-value">{{extra.zjtys || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">镜腿颜色编号</span>
        <span class="item-value">{{extra.zjtysbh || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">腿套材质</span>
        <span class="item-value">{{extra.zttcz || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">腿套颜色</span>
        <span class="item-value">{{extra.zjtttys || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">脚尾Logo</span>
        <span class="item-value">{{extra.zjwlg || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">饰件材质</span>
        <span class="item-value">{{extra.zjtsjcz || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">饰件颜色</span>
        <span class="item-value">{{extra.zjtsjys || '未维护'}}</span>
      </li>
    </ul>
    <ng-template #listHeader2>
      <nz-tag [nzColor]="'#f5f3ef'" style="border: 1px solid rgba(180, 160, 120, 0.3);color: #b19e7a">
        镜腿信息</nz-tag>
    </ng-template>
  </nz-collapse-panel>


  <nz-collapse-panel [nzHeader]="listHeader3" [nzActive]="false" [ngStyle]="styles" [nzShowArrow]="false">
    <ul class="m-attrList">
      <li class="item">
        <span class="item-name">鼻托类型</span>
        <span class="item-value">{{extra.zbtlx || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">鼻托材质</span>
        <span class="item-value">{{extra.zbtcz || '未维护'}}</span>
      </li>
      <li class="item" style="width: 100%">
        <span class="item-name">鼻托颜色</span>
        <span class="item-value">{{extra.zbt || '未维护'}}</span>
      </li>
    </ul>
    <ng-template #listHeader3>
      <nz-tag [nzColor]="'#f5f3ef'" style="border: 1px solid rgba(180, 160, 120, 0.3);color: #b19e7a">
        鼻托信息</nz-tag>
    </ng-template>
  </nz-collapse-panel>

  <nz-collapse-panel [nzHeader]="listHeader6" [nzActive]="false" [ngStyle]="styles" [nzShowArrow]="false">
    <ul class="m-attrList">
      <li class="item">
        <span class="item-name">产品风格</span>
        <span class="item-value">{{extra.zfgbq || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">设计风格</span>
        <span class="item-value">{{extra.zsjfg || '未维护'}}</span>
      </li>
      <li class="item">
        <span class="item-name">适合脸型</span>
        <span class="item-value">{{extra.zshlx || '未维护'}}</span>
      </li>
    </ul>
    <ng-template #listHeader6>
      <nz-tag [nzColor]="'#f5f3ef'" style="border: 1px solid rgba(180, 160, 120, 0.3);color: #b19e7a">
        风格概念</nz-tag>
    </ng-template>
  </nz-collapse-panel>
</nz-collapse>
